<template>
	<div class="home">
		<div class="left">
			<div class="left-one">
				<left-one :onlineOrderTotal="onlineOrderTotal" :onlineSaleTotal="onlineSaleTotal" />
			</div>
			<div class="left-two">
				<left-two :propBasicData="propBasicData"/>
			</div>
			<div class="left-three">
				<left-three />
			</div>
		</div>
		<div class="center-content">
			<header>
				马湖风景区智慧大屏
			</header>
			<div class="content">
				<div class="content-one">
					<mh-map />
				</div>
				<div class="content-two">
					<center-two />
				</div>
			</div>
		</div>
		<div class="right">
			<div class="right-top">
				<div class="right-one">
					<right-one :fansNums="fansNums" />
				</div>
				<div class="right-two">
					<right-two />
				</div>
			</div>
			<div class="right-bottom">
				<right-three />
			</div>
		</div>
	</div>
</template>

<script>
import baseUrl from '../plugin/url'
export default {
	name: 'Home',
	data() {
		return {
			propBasicData: {},
			onlineOrderTotal: '',
			onlineSaleTotal: '',
			fansNums: '',
		}
	},
	components: {
		leftOne: () => import('../components/left-one'),
		leftTwo: () => import('../components/left-two'),
		leftThree: () => import('../components/left-three'),
		mhMap: () => import('../components/echarts/MhBdMap'),
		centerTwo: () => import('../components/center-two'),
		rightOne: () => import('../components/right-one'),
		rightTwo: () => import('../components/right-two'),
		rightThree: () => import('../components/right-three')
	},
	created() {
	},
	beforeMount() {
		this.getInitData()
	},
	methods: {
		getInitData() {
			let url = baseUrl + '/web/api/v1/scenic/resource/'
			let param = {
				id: '1'
			}
			this.$get(url, param).then(res => {
				this.propBasicData = res.data
				const fans = res.data.officialAccount + ''
				const fansLen = fans.slice(0, 7).length
				if (fansLen < 7) {
					this.fansNums = '0'.repeat(7 - fansLen) + fans
				} else {
					this.fansNums = fans.slice(0, 7)
				}

				const onlineOrder = res.data.onlineOrderTotal + ''
				const officLen = onlineOrder.slice(0, 8).length
				if (officLen < 8) {
					this.onlineOrderTotal = '0'.repeat(8 - officLen) + onlineOrder
				} else {
					this.onlineOrderTotal = onlineOrder.slice(0, 8)
				}
				const onlineSale = res.data.onlineSaleTotal + ''
				const onlineLen = onlineSale.slice(0, 8).length
				if (onlineLen < 8) {
					this.onlineSaleTotal = '0'.repeat(8 - onlineLen) + onlineSale
				} else {
					this.onlineSaleTotal = onlineSale.slice(0, 8)
				}
			})
		}
	}
}
</script>
<style scoped lang="less">
.home {
	//height: 100%;
	//width: 177.78vh;
	width: 1920px;
	height: 1080px;
	background: url('../image/bg.png') no-repeat;
	background-size: 100% 100%;
	display: flex;
	justify-content: flex-start;
	.left {
		width: 28.38%;
		height: 100%;
		padding: 20px 0 30px 30px;
		box-sizing: border-box;
		.left-one {
			height: 24.1%;
			padding-top: 15px;
		}
		.left-two {
			height: 18%;
			margin-top: 30px;
		}
		.left-three {
			height: calc(54.39% - 30px);
			margin-top: 30px;
		}
	}
	.center-content {
		width: 46.88%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		header {
			height: 100px;
			background: url('../image/header.png') no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 39px;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(0, 192, 255, 1);
			letter-spacing: 16px;
		}
		.content {
			width: 91.1%;
			height: calc(100% - 130px);
			align-items: center;
			margin-left: 42px;
			padding-bottom: 30px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.content-one {
				width: 100%;
				height: 67%;
			}
			.content-two {
				width: 100%;
				height: calc(33% - 30px);
			}
		}
	}
	.right {
		width: 24.74%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 25px 26px 30px 0;
		box-sizing: border-box;
		.right-top {
			height: calc(73.2% - 30px);
			.right-two {
				height: calc(100% - 135px);
			}
		}
		.right-bottom {
			height: 26.8%;
			border: 1px solid #21b5e3;
			box-sizing: border-box;
			border-radius: 6px;
		}
	}
}
</style>
